<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="js/vue.js"></script>
    <style>
        div{
            border: 1px dotted #e6e6e6;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="ex1">
        <my-component></my-component>
        <component-inside></component-inside>
    </div>

    <div id="ex2">
        <my-component></my-component>
    </div>

    <div id="ex3">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>

    <div id="ex4">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>

    <div id="ex5">
        <simple-component message="hello!"></simple-component>
    </div>

    <div id="ex6">
        <p>ex6为父组件,它包含了两个子组件:button1 和 button2</p>
        <p>父组件-total:<span> {{ total }} </span></p>
        <p>按钮1-counter: {{ counter1 }}</p>
        <p>按钮2-counter: {{ counter2 }}</p>
        <button-click-one v-on:add="addBtn1"></button-click-one>
        <button-click-second v-on:add="addBtn2"></button-click-second>
    </div>

    <script>
        // 注册
        Vue.component('my-component', {
            template: '<section>A custom component!</section>'
        });
        //子组件
        var Child = {
            template: '<section>A other custom component!!!</section>'
        };
        new Vue({
            el: '#ex1',
            //局部注册子组件
            components: {
                // <my-component> 将只在父模板可用
                'component-inside': Child
            }
        });
    </script>

    <script>
        new Vue({
            el:'#ex2'
        });
    </script>

    <script>
        var data = { counter: 0 };
        Vue.component('simple-counter', {
            template: '<button v-on:click="counter += 1">{{ counter }}</button>',
            // data 是一个函数，因此 Vue 不会警告，
            // 但是我们为每一个组件返回了同一个对象引用
            data: function () {
                return data
            }
        });
        new Vue({
            el: '#ex3'
        })
    </script>

    <script>
        Vue.component('simple-counter', {
            template: '<button v-on:click="counter += 1">{{ counter }}</button>',
            data: function () {
                return {
                    counter: 0
                }
            }
        });
        new Vue({
            el: '#ex4'
        })
    </script>

    <script>
        Vue.component('simple-component', {
            // 声明 props
            props: ['message'],
            // 就像 data 一样，prop 可以用在模板内
            // 同样也可以在 vm 实例中像 “this.message” 这样使用
            template: '<span>{{ message }}</span>'
        });
        new Vue({
            el:"#ex5"
        })
    </script>

    <script>
        Vue.component('button-click-one',{
            template:'<button v-on:click="add">按钮1( {{ counter }} )</button>',
            data:function () {
                return {
                    counter:0
                }
            },
            methods:{
                add:function () {
                    this.counter+=  1;
                    this.$emit('add');
                }
            }
        });


        Vue.component('button-click-second',{
            template:'<button v-on:click="add">按钮2( {{ counter }} )</button>',
            data:function () {
                return {
                    counter:0
                }
            },
            methods:{
                add:function () {
                    this.counter += 1;
                    this.$emit('add');
                }
            }
        });


        var ex6 =   new Vue({
            el:'#ex6',
            data:{
                total:0,
                counter1:0,
                counter2:0
            },
            methods:{
                addBtn1:function () {
                    this.total+=1;
                    this.counter1+=1;
                },
                addBtn2:function () {
                    this.total+=1;
                    this.counter2+=1;
                }
            }
        });
    </script>
</body>
</html>